<template>
  <div class="receiving">
    <van-nav-bar
      title="选择收货地址"
      right-text="新增地址"
      left-arrow
      class="header"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <van-address-list
      :value="chosenAddressId"
      :list="addressList"
      default-tag-text="默认"
      @edit="onEdit"
      @select='onSelect'
    />
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'Receiving',
  computed: {
    ...mapState(['addressList', 'chosenAddressId'])
  },
  methods: {
    // 点击切换
    onSelect(item, index) {
      // 修改 id
      this.$store.dispatch('changeId', item.id);
      // 1, 修改全局的下标
      this.$store.dispatch('changeIndex', index);
      // 2. 跳转页面
      this.$router.push('/index/home');
    },
    // 按钮返回
    onClickLeft() {
      this.$router.push('/index/home');
    },
    // 跳转到新增地址
    onClickRight() {
      this.$router.push('/index/home/newaddress');
    },
    // 点击编辑
    onEdit(item, index) {
      this.$router.push({
        path: '/index/home/newaddress',
        query: {
          id: item.id
        }
      });
    },
  }
}
</script>

<style lang='scss'>
.header {
  background-image: linear-gradient(90deg,#0af,#0085ff);
  color: #fff;
  .van-nav-bar__text, .van-nav-bar__arrow, .van-nav-bar__title {
    color: #fff;
  }
}
.van-address-list__bottom {
  display: none;
}
</style>
